//风控管理 - 执行记录中查看详情的二级页面

import React, { Component } from 'react';
import { Card, Table, Collapse, Row, Col, Tag } from 'antd';

const Panel = Collapse.Panel;
const { Column } = Table;

const operateData = [];
for (let i = 0; i < 5; i++) {
  operateData.push({
		key: i,
    number: `${i+1}`,
    czTime: '2018-12-13 13:19:16',
    operator: '韩潮',
    operateContent: '取消订单',
    note: ''
  });
}

class Details extends Component {
  render() {
    return (
      <div>
        <Card title="规则引擎报告">
          <Collapse bordered={false} defaultActiveKey={['1', '2']} style={{backgroundColor: 'rgba(228,228,228,.4)'}}>
            <Panel header="结果概览" key="1">
            <Row gutter={16}>
              <Col span={6}>
                <Card title="执行结果" style={{height: '170px'}}>
                  <div style={{textAlign: 'center', paddingTop: '20px'}}>
                    <Tag color="yellow">人工审核</Tag>
                  </div> 
                </Card>
              </Col>
              <Col span={8}>
                <Card title="用户信息" style={{height: '170px'}}>
                  <Row>
                    <Col span={4}>姓名：</Col>
                    <Col span={4}>林少丽</Col>
                  </Row>
                  <Row>
                    <Col span={4}>身份证：</Col>
                    <Col span={10}>350628198908092546</Col>
                  </Row>
                  <Row>
                    <Col span={4}>手机号：</Col>
                    <Col span={10}>13959647566</Col>
                  </Row>
                </Card>
              </Col>
              <Col span={10}>
                <Card title="执行信息" style={{height: '170px'}}>
                  <Row>
                    <Col span={4}>开始时间：</Col>
                    <Col span={10}>2018-12-18 16:56:21</Col>
                  </Row>
                  <Row>
                    <Col span={4}>结束时间：</Col>
                    <Col span={10}>2018-12-18 16:56:21</Col>
                  </Row>
                </Card>
              </Col>
            </Row>
            </Panel>
            <Panel header="结果详情" key="2">
              <Card title="运营商">
                <Row type="flex" justify="end" style={{width: '40%', marginTop: '-63px', marginLeft: '800px', marginBottom: '45px'}}>
                  <Col span={3}>结果模式/</Col>
                  <Col span={4} style={{width: '9%'}}>得分:0/</Col>
                  <Col span={5} style={{width: '20%'}}>未启用决策引擎/</Col>
                  <Col span={4} style={{width: '14%'}}>共8条规则/</Col>
                  <Col span={3} style={{width: '8%'}}>1通过/</Col>
                  <Col span={4} style={{width: '11%'}}>1转人工/</Col>
                  <Col span={3}>0未通过</Col>
                </Row>
                <Table size="small" className="loan-table" rowClassName={this.setRowClassName} pagination={ false }>
                  <Column title='展期次数' align='center' dataIndex='count' width='50' />
                  <Column title='展期时间' align='center' dataIndex='time' width='50' />
                  <Column title='展期天数' align='center' dataIndex='days' width='50' />
                  <Column title='展期周期' align='left' dataIndex='cycle' width='50' />
                  <Column title='手续费用' align='center' dataIndex='handlingFee' width='50' />
                  <Column title='展期服务费' align='center' dataIndex='service' width='50' />
                  <Column title='展期方式' align='center' dataIndex='method' width='50' />
                </Table>
              </Card>
            </Panel>
          </Collapse>
        </Card>
        <Card title="操作记录" style={{marginTop: 15}}>
          <Table size="small" className="loan-table" rowClassName={this.setRowClassName} dataSource={operateData} pagination={ false }>
            <Column title='序号' align='center' dataIndex='number' width='30px' />
            <Column title='操作时间' align='center' dataIndex='czTime' width='80px' />
            <Column title='操作人' align='center' dataIndex='operator' width='50px' />
            <Column title='操作内容' align='center' dataIndex='operateContent' width='50px' />
            <Column title='备注' align='center' dataIndex='note' width='120px' />
          </Table>
        </Card>
      </div>
    );
  }
}

export default Details;